<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">
        <img src="@/assets/logo/logo.png" alt="图书馆Logo">
        <span>智慧图书馆</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        mode="horizontal"
        class="nav-menu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="books">图书检索</el-menu-item>
        <el-menu-item index="category">分类浏览</el-menu-item>
        <el-menu-item index="personal">个人中心</el-menu-item>
      </el-menu>
      <div class="login-register">
        <el-button type="text" @click="handleLogin">登录</el-button>
        <el-button type="text" @click="handleRegister">注册</el-button>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 轮播图模块 -->
      <div class="carousel-section">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <!--            <image-preview :src="item.path" height="100%" width="100%"/>-->
            <image-preview :src="item.path" height="100%" width="100%"/>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 快速搜索 -->
      <div class="search-section">
        <el-input
          placeholder="请输入书名/作者/ISBN"
          v-model="searchKeyword"
          class="search-input"
          @keyup.enter.native="handleSearch"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </el-input>
      </div>

      <!-- 内容主体 -->
      <div class="content-wrapper">
        <!-- 推荐图书 -->
        <section class="recommend-books">
          <h2 class="section-title">热门推荐</h2>
          <div class="book-list">
            <el-card
              v-for="book in recommendBooks"
              :key="book.libBookId"
              class="book-card"
            >
              <img :src="book.libBookCover" class="book-cover" alt="31">
              <div class="book-info">
                <h3 class="title">{{ book.libBookName }}</h3>
                <p class="author">{{ book.libBookAuthor }}</p>
              </div>
            </el-card>
          </div>
        </section>

        <!-- 右侧公告 -->
        <aside class="notice-sidebar">
          <h2 class="section-title">最新公告</h2>
          <ul class="notice-list">
            <li
              v-for="notice in notices"
              :key="notice.noticeId"
              class="notice-item"
            >
              <span class="notice-date">{{ notice.createTime }}</span>
              <span class="notice-content">{{ notice.noticeTitle }}</span>
            </li>
          </ul>
        </aside>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <p>© 2023 智慧图书馆 版权所有</p>
    </footer>
  </div>
</template>

<script>

import {pageBook} from "@/api/library/book";

export default {
  components: {},
  data() {
    return {
      activeMenu: 'home',
      searchKeyword: '',
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      loop: true,
      banners: [
        {id: 1, path: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'},
        {id: 2, path: 'https://pic4.zhimg.com/v2-0fb95714a008734768b1e0d9c2dfdbed_1440w.jpg'},
        {id: 3, path: 'https://pic3.zhimg.com/v2-aab78eb694a3eff029735346f646d42a_1440w.jpg'}
      ],
      recommendBooks: [
        // {
        //   libBookId: 1,
        //   libBookName: 'Vue.js设计与实现',
        //   libBookAuthor: '霍春阳',
        //   libBookCover: require('@/assets/banner/banner1.jpg'),
        //   rating: 4.7
        // },
        // 更多推荐图书数据...
      ],
      notices: [{
        noticeId: 1,
        createTime: '2023-10-01',
        noticeTitle: '国庆假期开放时间调整通知'
      }, // 更多公告数据...
      ]
    }
  },
  mounted() {
    this.doGetRecommendBooks()
  },
  methods: {
    handleMenuSelect(index) {
      this.$router.push({name: index})
    },
    handleSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({
          name: 'search',
          query: {keyword: this.searchKeyword}
        })
      }
    },
    handleLogin() {
      this.$router.push('/login')
    },
    handleRegister() {
      this.$router.push('/register')
    },
    // 获取推荐书籍
    doGetRecommendBooks() {
      // this.recommendBooks
      pageBook().then(res => {
        if (!res.rows.length > 3) {
          this.recommendBooks = res.rows
        } else {
          for (let i = 0; i < 3; i++) {
            this.recommendBooks.push(res.rows[i])
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  width: 200px;
}

.logo img {
  height: 40px;
  margin-right: 10px;
}

.logo span {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.login-register {
  width: 200px;
  display: flex;
  justify-content: flex-end;
}

.main-content {
  flex: 1;
  margin-top: 45px;
  padding: 20px 50px;
}

.carousel-section {
  height: 300px;
  margin-bottom: 30px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-section {
  max-width: 800px;
  margin: 0 auto 30px;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 30px;
}

.recommend-books .book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.book-card {
  transition: transform 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
}

.book-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.book-info {
  padding: 15px;
}

.book-info .title {
  font-size: 16px;
  margin: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-sidebar {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
}

.notice-list {
  list-style: none;
  padding: 0;
}

.notice-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
}

.notice-date {
  width: 80px;
  color: #999;
}

.notice-content {
  flex: 1;
}

.footer {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
}
</style>
